<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/font/iconfont.css">
    <style>
        .rate-box{
            font-size: 12px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }
        .stars{
            position: relative;
        }
        .stars .iconfont{
            font-size: 1em;
            padding-right: 0.2em;
            cursor: pointer;
            color: #cfcfcf;
        }
        .stars .iconfont.active{
            color: goldenrod;
        }
        .stars .open-stars{
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            pointer-events: none;
            transition: all 500ms ease;
        }
        .source{
            padding-left: 0.5em;
            font-size: 1.1em;
            color: #6f6f6f;
        }

        .star-test .iconfont{
            font-size: 30px;
            display: inline-block;
            overflow: hidden;
            text-align: left;
        }
        .star-test .iconfont:first-child{
            width: 15px;
            position: relative;
            z-index: 1;
        }
        .star-test .iconfont:last-child{
            width: 30px;
            margin-left: -15px;
            color: gold;
        }
    </style>
</head>
<body>
    <div id="app">
        <h5>容器</h5>
        <!-- <div class="star-test">
            <i class="iconfont icon-collection-b"></i>
            <i class="iconfont icon-collection-b"></i>
        </div> -->
        <rate-source :size="size"></rate-source>
        <rate-source :size="20"></rate-source>
        <br>
        <rate-source v-for="(source,i) in sources" v-model="sources[i]" :digits="1"></rate-source>

    </div>

    <script type="text/x-template" id="rate-source">
        <div class="rate-box" :style="`font-size:${size}px`">
            <div class="stars">
                <!-- <i v-for="c in 5"
                    class="iconfont icon-collection-b"
                    :class=" { active:modelValue>=c*2 } "
                ></i> -->
                <div class="close-stars">
                    <i v-for="c in 5" class="iconfont icon-collection-b" @click="chooseSource(c*2)" ></i>
                </div>
                <div class="open-stars" :style="`width:${modelValue*10}%`">
                    <i v-for="c in 5" class="iconfont icon-collection-b active"></i>
                </div>
            </div>
            <div class="source">{{ modelValue.toFixed(digits) }}</div>
        </div>
    </script>

    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const RateSource = {
            template:"#rate-source",
            emits:["update:modelValue"],
            props:{
                size:{
                    type:Number,
                    default:12
                },
                digits:{
                    type:Number,
                    default:0
                },
                modelValue:{
                    type:Number,
                    default:0
                }
            },
            methods: {
                chooseSource(s) {
                    this.$emit("update:modelValue",s)
                }
            },
        }

        createApp({
            components: {
                RateSource,
            },
            data(){
                return {
                   size:12,
                   sources:[0,10,5,6.8,3.46,7.21]
                }
            }
        }).mount("#app");
    </script>
</body>
</html>